import { IFormProps, size, formItemLayout, dateTimeFormat, getUploadResult, productPage, getImages, getFileList, dateFormat } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select, Upload, Checkbox, InputNumber, Col, Button, Table, Popconfirm, DatePicker } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
const Styles = require("../../styles/index.less");
import moment from 'moment';
import { PaginationProps } from 'antd/lib/pagination';
export interface IRedPacketListProps extends FormComponentProps {
    redpacket: Array<api.SingleUserMallUsersVOUserRedPacketVO>,
    loading: boolean,
    onSearch: (any) => void,
    pagination: PaginationProps,
    pageIndex: number,
    pageSize: number,
}
class RedPacketList extends React.PureComponent<IRedPacketListProps, any>{
    constructor(props) {
        super(props);
    }

    state = {
    }

    search = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                this.props.onSearch(form);
            }
        });
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { redpacket, loading, pagination, pageIndex, pageSize } = this.props;
        return (<Col span={24}>
            <Form layout="inline">
                <Form.Item>
                    <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                </Form.Item>
            </Form>
            <Col span={24}>
                <hr className={Styles.hrBorder} />
                <h3>用户红包记录</h3>
            </Col>
            <Col span={24}>
                <Table
                    dataSource={redpacket}
                    bordered
                    pagination={pagination}
                    rowKey={(record: api.SingleUserMallUsersVOUserRedPacketVO) => String(record.id)}
                    loading={loading}
                >
                    <Table.Column title="序号" key="no" render={(text, record, index) => {
                        return (pageIndex - 1) * pageSize + index + 1
                    }} />
                    <Table.Column title="获得金额" key="exchangeAmount" dataIndex="exchangeAmount" />
                    <Table.Column title="获得原因" key="exchangeReason" dataIndex="exchangeReason" />
                    <Table.Column title="获得时间" key="exchangeTime" render={(text, record: api.SingleUserMallUsersVOUserRedPacketVO, index) => {
                        return moment(record.exchangeTime).format(dateTimeFormat)
                    }} />
                </Table>
            </Col>
        </Col>)
    }
}

export default Form.create()(RedPacketList);